<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pai {
            float: left;
            width: 105px;
            height: 150px;
            background-image: url('../img/3.jpg');
        }
    </style>
</head>
<body>
    <h1>模拟显示牌</h1>
   
    <script>
     let pai = [];
     pai.push( { color: '黑',  num: 3 ,pic:'3.jpg' });
     pai.push( { color: '红',  num: 4 ,pic:'17.jpg'});
     pai.push( { color: '梅',  num: 5 ,pic:'31.jpg'});

    for(let i=0;i<pai.length;i++){
        let p = pai[i];
        //JS 创造div
        let d =  document.createElement('DIV');
        d.className = 'pai'
        d.style.backgroundImage = "url('../img/"+p.pic +"')";
        document.body.appendChild( d );
    }

    </script>
</body>
</html>